<template>
  <div class="hear">
    <div class="container">
      <div class="head-portrait">
        <n-space align="flex-end">
          <n-avatar
              :size="200"
              object-fit="cover"
              :src="ftpUrlImg + UserDetailListInfo.coverPictureUrl"/>
          <div class="container user-cont mt-3">
            <div class="user-title">
              {{ UserDetailListInfo.name }}
            </div>
            <!--            <el-button-->
            <!--                plain-->
            <!--                @click="open1">-->
            <!--              -->
            <!--            </el-button>-->
            <table class="table">
              <tbody>
              <tr>
                <td v-if="UserDetailListInfo.age == '' ? noShow : show ">{{ formatAge(UserDetailListInfo.age) }}岁</td>
                <td v-if="UserDetailListInfo.sex == 1">男</td>
                <td v-else>女</td>
              </tr>
              <tr>
                <td v-if="UserDetailListInfo.wxNumber == '' ? noShow : show ">微信:{{ UserDetailListInfo.wxNumber }}</td>
                <td v-if="UserDetailListInfo.phone == '' ? noShow : show ">电话:{{ UserDetailListInfo.phone }}</td>
                <td v-if="UserDetailListInfo.email == '' ? noShow : show " style="width: 220px;">邮箱:{{ UserDetailListInfo.email }}</td>
              </tr>
              <tr>
                <td v-if="UserDetailListInfo.height == '' ? noShow : show ">身高(cm):{{ UserDetailListInfo.height }}</td>
                <td v-if="UserDetailListInfo.weight == '' ? noShow : show ">体重(kg):{{ UserDetailListInfo.weight }}</td>
              </tr>
              <tr>
                <td v-if="grade == '' ? noShow : show " class="right-border">年级:{{ grade }}</td>
                <td v-if="collegeName == '' ? noShow : show " class="right-border">{{ collegeName }}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </n-space>
        <div class="detail-info">
          <!--          <button class="brief-introduction"><a href="#">打招呼</a></button>-->
          <button @click="sengNewMsg" class="brief-introduction">发信息</button>
          <div class="list-attention">
            <div @click.stop="clickUserLike">
              <svg v-if="UserDetailList.isLike" class="icon" aria-hidden="true">
                <use xlink:href="#icon-cpxihuan"></use>
              </svg>
              <svg v-if="!UserDetailList.isLike" class="icon icon-attention" aria-hidden="true" >
                <use xlink:href="#icon-cpxihuanxiantiao"></use>
              </svg>
              <span>
                <span style="font-size: 14px;position: relative;top: -1px">喜欢:</span>
                {{ UserDetailList.likeNum }}</span>
            </div>
            <div @click.stop="clickUserAttention(UserDetailList)">
              <el-button v-if="!UserDetailList.isAttention" type="default" size="small" round color="#bc4258">关注</el-button>
              <el-button v-if="UserDetailList.isAttention" type="danger" size="small" round color="red" style="color: #fff">已关注</el-button>
<!--              <svg v-if="UserDetailList.isAttention" class="icon icon-attention" aria-hidden="true">-->
<!--                <use xlink:href="#icon-yiguanzhu"></use>-->
<!--              </svg>-->
<!--              <svg v-if="!UserDetailList.isAttention" class="icon icon-attention" aria-hidden="true">-->
<!--                <use xlink:href="#icon-jiaguanzhu"></use>-->
<!--              </svg>-->

              <span>
                <span style="font-size: 14px;position: relative;top: -1px">关注数:</span>
                {{ UserDetailList.attentionNum }}</span>
            </div>
          </div>
          <!--          <button class="brief-introduction"><a href="#">月老牵线</a></button>-->
        </div>
      </div>
      <div class="member">
        <div class="about-our">关于我们</div>
        <div class="about-cont">
          <p>有使用问题，请联系我们:</p>
          <div>
            <p>邮箱：1915576645@qq.com</p>
            <p>电话：15906976415</p>
          </div>
        </div>
      </div>
      <div class="data">
        <div class="personal-data">
          <h5>个人介绍</h5>
          <n-space>
            <p>{{ UserDetailListInfo.introduction }}</p>
          </n-space>
        </div>
        <div class="personal-data ">
          <h5>个人标签</h5>
          <div class="personal-info">
            <el-tag v-for="labelList in UserDetailLabelList" size="default" color="#de8e9c" style="margin: 6px 6px 0 6px;color: #fff;font-size: 12px">
              {{ labelList.label }}
            </el-tag>
<!--            <n-space >-->
<!--              <n-tag type="success"  style="margin: 6px 6px 0 6px">-->
<!--                {{ labelList.label }}-->
<!--              </n-tag>-->
<!--            </n-space>-->
          </div>
        </div>
        <div class="personal-data personal-carousel" >
          <h5>个人照片墙展示</h5>
          <el-carousel indicator-position="outside" :height="bannerHeight + 'px'" style="width: 95%;">
            <el-carousel-item v-for="(banner,index) in UserBannerList" :key="index">
              <el-image
                  class="carousel-img"
                  :src="ftpUrlImg + banner.bannerImgUrl"
                  :onerror="defaultImg"
                  loading="lazy"
                  fit="cover"
                  v-if="banner.bannerImgUrl == null ? noShow : show"
                  alt="照片墙"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="recommend">
        <div class="box">
          <h4>更多用户</h4>
          <div class="more-user" v-for="(moreList,index) in listRUserList" :key="index">
            <div class="more-img">
              <el-image :src="ftpUrlImg + moreList.user.coverPictureUrl "
                        fit="cover"
                      style="width: 130px;height: 130px"
                      lazy alt="" ></el-image>
            </div>
            <div class="more-list">
              <div>
                <span>{{ moreList.user.name }}</span>
                <span v-if="moreList.user.sex == 1">男</span>
                <span v-else>女</span>
              </div>
              <div>
                <span v-if="moreList.user.age == '' || moreList.user.age == null ? noShow : show ">{{ formatAge(moreList.user.age) }}岁</span>
                <span v-if="this.listRUserListGrade == '' ? noShow : show">年级:{{ listRUserListGrade }}</span>
              </div>
              <div v-if="moreList.user.email == '' ? noShow : show">{{ moreList.user.email }}</div>
              <div v-if="moreList.user.phone == '' ? noShow : show">{{ moreList.user.phone}}</div>
              <div v-if="moreList.college == '' || moreList.college == null ? noShow : show ">{{ moreList.user.college }}</div>
              <div v-if="moreList.user.introduction == '' ? noShow : show " class="introduction">{{moreList.user.introduction}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {useRoute, useRouter} from "vue-router";
import router from "@/router";
import {ref} from "vue";
import {ftpUrlImg} from "@/global/config";
import {formatAge} from "../../utils/utils";
import {Plus,Close} from '@element-plus/icons-vue'

export default {
  name:'PersonalDetails',
  created() {
    this.$loading();
    // let id = this.$route.params.id
    if(this.route.params.id){
      sessionStorage.setItem('PersonalDetailsUserId',this.route.params.id)
    }



    let params = {
      userId: sessionStorage.getItem('PersonalDetailsUserId'),
      isSearch:this.route.params.isSearch,
    };
    // console.log(sessionStorage.getItem('PersonalDetailsUserId'))
    this.$requestCenter.getUserDetailInfoList(params).then((e) => {
      console.log("用户详细信息",e.data)
      this.UserDetailListInfo = e.data.user
      this.UserDetailList = e.data
      this.UserDetailLabelList = e.data.labelList
      this.collegeName = e.data.college.collegeName
      this.UserBannerList = e.data.bannerLists
      this.listRUserList = e.data.listRUser
      this.listRUserListGrade = e.data.listRUser.user.grade


        if(e.data.user.grade == 1){
            this.grade = '大一'
        }else if(e.data.user.grade == 2){
            this.grade = '大二'
        }else if(e.data.user.grade == 3){
            this.grade = '大三'
        }else if (e.data.user.grade == 4){
            this.grade = '大四'
        }else{
            this.grade = '未知'
        }

      if(e.data.listRUserListGrade == 1){
        this.grade = '大一'
      }else if(e.data.listRUserListGrade == 2){
        this.grade = '大二'
      }else if(e.data.listRUserListGrade == 3){
        this.grade = '大三'
      }else if (e.data.listRUserListGrade == 4){
        this.grade = '大四'
      }else{
        this.grade = '未知'
      }
    })
    this.$loading().close();
  },
  mounted() {

    this.screenWidth = window.innerWidth
    this.bannerHeight = 500 / 1550 * this.screenWidth
    window.onresize = () =>{
      this.screenWidth = window.innerWidth
      this.bannerHeight = 500 / 1550 * this.screenWidth
    }
  },
  methods: {
      //定时添加浏览量
      addBrowse(){
          let userId = this.route.params.id
          if (userId && userId != null){
               this.addBrowseSetTimeout = setTimeout(function (){
                  this.$requestCenter.addBrowse(this.route.params.id)
                  alert("6666666")
              },5000)
          }
      },
    formatAge,
    defaultImg(){
      this.src = 'src/assets/lazy.jpg'
    },
    clickUserLike() {
      this.$loading();
      let type = 0;
      if (this.UserDetailList.isLike) {
        type = 1
        this.UserDetailList.likeNum = this.UserDetailList.likeNum - 1
      } else {
        this.UserDetailList.likeNum = this.UserDetailList.likeNum + 1
      }
      this.UserDetailList.isLike = !this.UserDetailList.isLike
      let params = {
        peerID: parseInt(sessionStorage.getItem('PersonalDetailsUserId')),
        type: type
      }
        console.log(params)
      this.$requestCenter.addOrCancelLike(params).then((e) => {
        console.log(e)
        if (e.code === 20061) {
          if (this.UserDetailList.isLike) {
            this.$message.success("点赞成功！")
          } else {
            this.$message.warning("取消点赞！")
          }
        } else {
          this.$message.error("操作出错！")
          this.UserDetailList.isLike = !this.UserDetailList.isLike
          if (this.UserDetailList.isLike) {
            this.UserDetailList.likeNum = this.UserDetailList.likeNum + 1
          } else {
            this.UserDetailList.likeNum = this.UserDetailList.likeNum - 1
          }
        }
      })
      this.$loading().close();
    },

    clickUserAttention() {
      this.$loading();
      let type = 0;
      if (this.UserDetailList.isAttention) {
        type = 1
          this.UserDetailList.attentionNum = this.UserDetailList.attentionNum - 1
      }else {
          this.UserDetailList.attentionNum = this.UserDetailList.attentionNum + 1
      }
      let params = {
        peerID: parseInt(sessionStorage.getItem('PersonalDetailsUserId')),
        type: type
      }
      this.UserDetailList.isAttention = !this.UserDetailList.isAttention
      this.$requestCenter.addOrCancelAttention(params).then((e) => {
        console.log(e)
        if (e.code === 20061) {
          if (this.UserDetailList.isAttention) {
            this.$message.success("成功关注！")
          } else {
            this.$message.warning("取关成功！")
          }
        } else {
          this.$message.error("操作出错！")
            if (this.UserDetailList.isAttention){
                this.UserDetailList.attentionNum = this.UserDetailList.attentionNum + 1
            }else {
                this.UserDetailList.attentionNum = this.UserDetailList.attentionNum - 1
            }
        }
      })
      this.$loading().close();
    }
  },
  setup(props,{attrs,slots,emit}) {
    const route = useRoute();


    function sengNewMsg(){
        emit('sengNewMsg',route.params.id)
    }
    return {
      route,
      sengNewMsg,
      UserDetailListInfo: ref([]),//用户资料信息
      UserDetailList: ref([]),
      UserDetailLabelList: ref([]),//用户标签
      // UserDetailList: ref([]),//用户点赞喜欢
      collegeName:ref(),
      ftpUrlImg: ftpUrlImg,
      grade:ref(),
      noShow:ref(false),
      show:ref(true),
      UserBannerList:ref([]),
      listRUserList:ref([]),
      listRUserListGrade:ref([]),
      bannerHeight:ref(500),
      Causal:ref(),
      addBrowseSetTimeout:null,
      Plus, Close
    }
  },
    beforeDestroy() {
        console.log(this.addBrowseSetTimeout)
    }
}

</script>


<style lang="less" scoped>
.hear {
  padding-top: 100px;
  padding-bottom: 40px;
}

.container {
  position: relative;

  //background-color: palegoldenrod;
  .user-cont{
    width: 100%;
    .table tbody tr{
      padding: 0 10px;
      td{
        width: 160px;
      }
    }
  }
}

.head-portrait {
  //background-color: rgba(0, 128, 0, 0.12);
  width: 72%;
  border-radius: 6px;
  box-shadow: 1px 1px 4px #ccc;
  margin: 25px 0;
}

.head-portrait .n-space {
  position: relative;
  //.el-button {
  //  border-radius: 15px;
  //}
}

.head-portrait .n-space .table tr {

}

.head-portrait .n-space .table .right-border {
  border-right: 2px solid white;
}

.head-portrait .n-space .n-carousel {
  position: absolute;
  top: 3%;
  right: 6%;
  width: 32%;
  height: 100%;
  object-fit: cover;
}

.head-portrait .n-space .carousel-img {
  width: 100%;
}

.brief-introduction {
  display: inline-block;
  margin: 10px 10px;
  line-height: 40px;
  padding: 0 10px;
  //background-color:rgb(247, 245, 254) ;
  border-radius: 5px;
  border: transparent;
  width: 19%;
  color: #fff;
  background: #de8e9c;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member {
  position: absolute;
  right: 40px;
  top: 0px;
  width: 23%;
  //height: 42%;
  //text-align: center;
  //background-color: skyblue;
  border-radius: 4px;
  box-shadow: 1px 1px 4px #ccc;
  .about-our{
    font-size: 16px;
    color: #333;
    font-weight: 600;
    padding: 10px 20px;
    border-bottom: 1px solid #dedede;
  }
  .about-cont{
    font-size: 16px;
    padding: 20px;
    div{
      font-size: 14px;
      p{
        margin-bottom: 1px;
      }
    }
  }
}
.data {
  //background-color: rgba(0, 128, 0, 0.12);
  width: 72%;
  margin: 30px 0;
  border-radius: 6px;
  box-shadow: 1px 1px 4px #ccc;
}

.data:nth-child(3) {
  padding: 10px 0;
}

.personal-data {
  margin-left: 20px;
  margin-right: 20px;
  height: 125px;
  h5{
    font-size: 20px;
    width: 85px;
    color: #333;
    padding-bottom: 4px;
    border-bottom: 1px solid #de8e9c;
  }
}

.personal-data table {
  border: transparent;
}

.personal-data .table tr {
  line-height: 10px;
  margin: 0 20px;
}

.personal-info {
  display: flex;
}

.recommend {
  position: absolute;
  right: 40px;
  top: 205px;
  width: 23%;
  text-align: center;
  border-radius: 4px;
  .box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: 1px 1px 4px #ccc;
  }
  .box h4 {
    position: relative;
    border-bottom: 1px solid #dedede;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 0 10px 20px;
    text-align: left;
  }
  .more-user{
    padding: 14px 10px;
    display: flex;
    border-bottom: 1px solid rgba(222, 222, 222, 0.75);
    .more-img{
      border: 1px solid rgba(234, 234, 234, 0.81);
      img{
        width: 130px;
        height: 130px;
        object-fit: cover;
      }
    }
    .more-list{
      font-size: 14px;
      text-align: left;
      padding-left: 10px;
      p{
        margin-bottom: 4px;
      }
      div span:nth-child(2){
        padding-left: 14px;
      }
    }
  }
}

.right h6 {
  margin-bottom: 0 !important;
}

img {
  object-fit: cover;
}

.detail-info {
  display: flex;
  .list-attention {
    display: flex;
    align-items: center;
    padding: 2px 0;
    margin-left: 20px;
    div:nth-child(2) {
      padding-left: 10px;
    }
    span {
      color: #434343;
      font-size: 18px;
      position: relative;
      top: 2px;
      padding: 0 4px;
    }
  }
  .list-attention div:nth-child(2){
    color: #ffff;
  }
}

.user-title {
  padding-left: 10px;
}
.personal-carousel{
  height: 600px;
  width: 100%;
  h5{
    font-size: 20px;
    padding-bottom: 10px;
    width: 150px;
    margin-bottom: 10px;
  }
  img{
    width: 100%;
    height: 100%;
  }
}
//iconfont
.icon {
  width: 1.5em;
  height: 1.5em;
  //vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon-attention{
  width: 1.3em;
  height: 1.3em;
  //vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.introduction{
  min-height: 35px;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
}
</style>